<template>
<div>
  <el-container>
    <el-header>
    <button type="button" class="el-button el-button--primary"><router-link :to="{path:'/'}" tag="span">首页</router-link></button>
    <button type="button" class="el-button el-button--primary"><router-link to="/bag" tag="span">商城页面</router-link></button>
    <button type="button" class="el-button el-button--primary"><router-link to="/myRightMain" tag="span">文章推荐</router-link></button>
    <button type="button" class="el-button el-button--primary"><router-link cnpm to="/user/red" tag="span">用户</router-link></button>
    </el-header>
    <el-container>
      <el-aside>Aside</el-aside>
      <el-container>
        <el-main>
          <el-button @click="getPara">点击获取路由参数</el-button>
          <p>{{routeparams}}</p>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</div>
</template>
<script>
export default {
  data(){
    return{
      routeparams:{}
    
    }
  },
  methods:{
    getPara(){
      let sqparams = this.$route.params;
      this.routeparams = sqparams;

    }
  }
}
</script>

<style>
 .el-header, .el-footer {
    background-color: khaki;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    height:800px;
    width:200px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
</style>